
<template>
  <el-container>
    <el-header>
      <el-button type="primary" style="margin-left: 80%" icon="el-icon-download" @click="download">简历下载</el-button>
    </el-header>
    <div style="width: 80%;padding-left: 10%;margin-top: 20px" >
      <el-container>
        <el-aside  width="200px;" style="background-color: white">
          <div class="demo-fit" style="margin-top: 20px;text-align: center">
            <div class="block">
              <span class="title">{{ fit }}</span>
              <el-avatar shape="square" :size="100" :src="url"></el-avatar>
            </div>
          </div>
          <div class="srca">
            <h3>
              <i class="fa fa-user" aria-hidden="true"></i>基本信息</h3>
            <hr/>
            <ul>
              <li>
                <label>个人信息：</label>
                <span>{{name}} / {{sex}} / {{nation}}</span>
              </li>
              <li>
                <label>毕业学校：</label>
                <span>{{school}}</span>
              </li>
              <li>
                <label>所学专业：</label>
                <span>{{major}}</span>
              </li>
              <li>
                <label>所在班级：</label>
                <span>{{cla}}</span>
              </li>
              <li>
                <label>学历：</label>
                <span>{{xli}}</span>
              </li>
            </ul>
          </div>
          <div class="srca">
            <h3>
              <i class="fa fa-phone-square" aria-hidden="true"></i>联系方式</h3>
            <hr/>
            <ul>
              <li>
                <label>手机：</label>
                <a href="#" >{{telephone}}</a>
              </li>
              <li>
                <label>邮箱：</label>
                <a href="#">{{email}}</a>
              </li>
            </ul>
          </div>
          <div class="srca">
            <h3>
              <i class="fa fa-gear" aria-hidden="true"></i>个人技能</h3>
            <hr/>
            <ul>
              <li>
                <label>HTML</label>
                <el-progress :text-inside="true" :stroke-width="16" :percentage="70"></el-progress>
              </li>
              <li>
                <label>CSS</label>
                <el-progress :text-inside="true" :stroke-width="16" :percentage="70"></el-progress>
              </li>
              <li>
                <label>JavaScript</label>
                <el-progress :text-inside="true" :stroke-width="16" :percentage="70"></el-progress>
              </li>
              <li>
                <label>React</label>
                <el-progress :text-inside="true" :stroke-width="16" :percentage="70"></el-progress>
              </li>
              <li>
                <label>Node.js</label>
                <el-progress :text-inside="true" :stroke-width="16" :percentage="60"></el-progress>
              </li>
              <li>
                <label>小程序</label>
                <el-progress :text-inside="true" :stroke-width="16" :percentage="70"></el-progress>
              </li>
              <li>
                <label>React</label>
                <el-progress :text-inside="true" :stroke-width="16" :percentage="70"></el-progress>
              </li>
              <li>
                <label>React</label>
                <el-progress :text-inside="true" :stroke-width="16" :percentage="70"></el-progress>
              </li>
            </ul>
          </div>
        </el-aside>
        <el-main >
          <div style="background-color: white;margin-left: 30px">
            <div>
              <h3>
                <i class="fa fa-graduation-cap" aria-hidden="true"></i>教育经历</h3>
              <hr/>
              <span v-html="educational"></span>
            </div>

            <!-- 工作经历 -->
            <div class="work info-unit">
              <h3>
                <i class="fa fa-shopping-bag" aria-hidden="true"></i>工作经历</h3>
              <hr/>
              <span v-html="experience"></span>
            </div>

            <!-- 项目经验 -->
            <div class="project info-unit">
              <h3>
                <i class="fa fa-terminal" aria-hidden="true"></i>个人技能</h3>
              <hr/>
              <span v-html="skills"></span>
            </div>
            <!-- 自我评价 -->
            <div class="work info-unit">
              <h3>
                <i class="fa fa-pencil" aria-hidden="true"></i>自我评价/期望</h3>
              <hr/>
              <span v-html="evaluation"></span>
          </div>
          </div>
        </el-main>
      </el-container>
    </div>
  </el-container>
</template>

<script>
export default {
  data(){
    return{
      duid: this.$route.query.uid,
      tid: this.$route.query.tid,
      wid: this.$route.query.wid,
      editor_content:"",
      uid:"",
      name:'',
      awards:'',
      cla:'',
      department:'',
      email:'',
      telephone:'',
      xli:'',
      sex:'',
      nation:'',
      school:'',
      major:'',
      experience:'',
      skills:'',
      evaluation:'',
      educational:'',
      selection_data: [],
      dialog_title: "",
      user_form: {
        name: "",
        sex: "",
        cla: "",
        nation:"",
        stu:"",
        major:"",
        email:"",
        tel:""
      },
      user_data: [],
    }
  },
  mounted() {
    this.selectStuInfo();
  },
  methods:{
    download(){
      this.$axios({
        url: this.$axios.defaults.baseURL+"/enterprise/getpath",
        method: "get",
        params:{
          uid:this.duid,
          tid:this.tid,
          wid:this.wid
        }
      }).then(res => {
        if(res.data != null){
          window.open(this.$axios.defaults.baseURL+"/enterprise/download?path=" +res.data.path);
          this.$message.success("下载成功，请到对应文件夹下查看");
        }
      })
    },
    selectStuInfo(){
      //发送请求
      this.$axios({
        url: this.$axios.defaults.baseURL+"/student/studentinfo",
        method: "get",
        params:{
          uid:this.duid,
        }
      }).then(res => {
        this.name = res.data.name;
        this.sex = res.data.sex;
        this.nation = res.data.nation;
        this.school = res.data.school;
        this.major = res.data.major;
        this.telephone = res.data.telephone;
        this.email = res.data.email;
        this.experience = res.data.experience;
        this.skills = res.data.skills;
        this.evaluation = res.data.evaluation;
        this.xli = res.data.xli;
        this.cla = res.data.cla;
        this.uid = res.data.uid;
        this.educational = res.data.educational;
      })
    },
  }

}
</script>

<style scoped>

.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
.amap-wrapper {
  width: 800px;
  height: 200px;
}
.el-aside {
  color: #333;
  font-family: Arial;
  border-radius: 5px 5px 5px 5px;
  width: 20%;
  background-color: white;
}

.el-main {
  background-color: white;
  color: #333;
  margin-left: 10px;
  border-radius: 5px 5px 5px 5px;
}
.srca{
  margin-top: 10px;
  margin-left: 10px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

li{
  margin-top: 8px;
  list-style: none;
}
span{
  inline-size: 20px;
}
</style>